<template>
  <div style="display: flex">
    <div class="left">
      <el-input placeholder="请输入区域名称搜索" suffix-icon="el-icon-search" size="small" @input="getStoreList"
                v-model="assignTaskName"></el-input>
      <el-tree style="margin-top: 10px"
               :data="dataTree"
               ref="treeRef"
               highlight-current
               accordion
               :render-content="renderContent"
               :props="defaultProps"
               default-expand-all
               node-key="id"
               @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="right" v-loading="loading">
      <div class="topSearch">
        <el-date-picker
            v-model="value1"
            style="width: 250px"
            size="small"
            @change="getDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-select v-model="date" size="small" style="margin-left: 5px">
          <el-option label="全部抓图任务" value="1"></el-option>
        </el-select>
        <el-select v-model="date" size="small" style="margin-left: 5px">
          <el-option label="所有场景" value="1"></el-option>
        </el-select>
        <el-select v-model="date" size="small" style="margin-left: 5px">
          <el-option label="全部" value="1"></el-option>
        </el-select>
        <el-input placeholder="请输入摄像头搜索" size="small" style="width: 200px;margin-left: 5px"
                  v-model="params.serialNumber" @keyup.enter.native="_search" clearable></el-input>
      </div>
      <div class="imgBar">
        <div style="position: absolute;top: 200px;left:40%;display: flex;flex-direction: column;align-items: center"
             v-if="!assignTaskName||imgList.length==0">
          <img v-if="!assignTaskName&&imgList.length==0" src="https://qiniushelves.jiachuangnet.com/renovation/img/V958716无数据 (1).png" alt="">
          <img v-if="imgList.length==0&&assignTaskName" src="https://qiniushelves.jiachuangnet.com/renovation/img/V958716无数据 (1).png" alt="">
          <p style="margin-top:20px;color: #919398" v-if="!assignTaskName&&imgList.length==0">没有选择店铺呀~</p>
          <p style="margin-top:20px;color: #919398" v-if="imgList.length==0&&assignTaskName">该店铺没有抓拍~</p>
        </div>
        <div v-if="imgList.length!=0"
             style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;margin-top: 20px;height: calc(100vh - 300px);overflow-y: auto">
          <p v-for="item in imgList" style="padding: 10px;border: 1px solid #eee;box-sizing: border-box"
             @click="intoPic(item)">
            <el-image :src="'https://'+item.imgUrl" style="width: 100%;height: auto" class="pHover"></el-image>
            <span style="margin-top: 10px;display: block;display: flex;align-items: center">
               <img src="@/assets/img/camera.svg" style="width: 25px;display: block">
              <span style="display: block">{{ item.serialNumber }}</span>
            </span>
            <span style="margin-top: 5px;display: block">{{item.inspectionName }}</span>
            <span style="margin-top: 5px;display: block;font-size: 12px;color: #606266">抓拍时间：{{item.inspectionTime }}</span>
          </p>
        </div>
        <el-pagination v-if="imgList.length!=0" style="padding: 20px 0;" align="right" @size-change="handleSizeMessage"
                       @current-change="handleCurrentMessage" :current-page="currentPage" :page-sizes="[20, 30, 40]"
                       layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <pictruePatorlDraw ref="picDraw"></pictruePatorlDraw>
  </div>
</template>
<script>
import dayjs from "dayjs";
import pictruePatorlDraw from "./componentDialog/pictruePatorlDraw.vue";

export default {
  name: "pictrueCenter",
  components: {
    pictruePatorlDraw,
  },
  data() {
    return {
      value1: "",
      date: "1",
      total: 0,
      imgList: [],
      currentPage: 1,
      assignTaskName: "",
      loading: false,
      params: {
        startTime: "",
        endTime: "",
        serialNumber: "",
        pageNum: 1,
        pageSize: 20,
      },
      dataTree: [
        {
          label: "店铺列表",
          icon: "el-icon-s-goods",
          children: []
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  created() {
    this.getStoreList()
  },
  methods: {
    renderContent(h, {node, data, store}) {
      return h('span', {class: 'custom-tree-node'}, [
        h('i', {class: data.icon, style: {marginRight: '6px'}}),
        h('span', data.label)
      ])
    },
    handleNodeClick(val) {
      this.loading = true
      this.assignTaskId = val.assignTaskId
      this.assignTaskName = val.assignTaskName
      const params = {
        ...this.params,
        assignTaskName: val.assignTaskName
      }
      this.$api.inspectionTaskGetAllPictureList(params).then(res => {
        this.imgList = res.data
        this.total = res.total
        setTimeout(() => {
          this.loading = false
        }, 500)
      })
    },
    getShop() {

    },
    getStoreList() {
      this.$api.inspectionTaskGetAllAssignTaskList({assignTaskName: this.assignTaskName}).then(res => {
        res.map(a => {
          a.label = a.assignTaskName
          a.id = a.assignTaskId
        })
        this.dataTree[0].children = res
      })
    },
    getDate(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.params.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    handleSizeMessage(val) {
      this.params.pageSize = val
      const params = {
        ...this.params,
        assignTaskName: this.assignTaskName
      }
      this.$api.inspectionTaskGetAllPictureList(params).then(res => {
        this.imgList = res.data
        this.total = res.total
      })
    },
    intoPic(item) {
      const val = {
        ...item,
        assignTaskName: this.assignTaskName,
        assignTaskId: this.assignTaskId
      }
      // console.log(val)
      this.$refs.picDraw.handleOpen(val)
    },
    _search() {
      const params = {
        ...this.params,
        assignTaskName: this.assignTaskName
      }
      this.$api.inspectionTaskGetAllPictureList(params).then(res => {
        this.imgList = res.data
        this.total = res.total
      })
    },
    handleCurrentMessage(val) {
      this.params.pageNum = val
      const params = {
        ...this.params,
        assignTaskName: this.assignTaskName
      }
      this.$api.inspectionTaskGetAllPictureList(params).then(res => {
        this.imgList = res.data
        this.total = res.total
      })
    },
  }
}
</script>

<style scoped lang="less">
.left {
  width: 20%;
  padding: 10px;
  box-sizing: border-box;
  border-right: 1px solid #eeeeee;
  height: calc(100vh - 250px);
}

.right {
  padding: 10px;
  width: 80%;
  position: relative;
}

.pHover :hover {
  border: 1px solid #ff6a00;
}

</style>